<template>
  <el-main class="sc-page">
    <el-page-header content="定宽页面" />
    <el-alert
      class="page-msg"
      description="<el-main>添加定宽样式 .sc-page  即可定宽, 固定1200px宽度, 适用于一些无法自适应的页面, 类似报表等需要固定宽度的页面. 其实定宽页面更受C端用户接受和习惯"
      type="warning"
      show-icon
      :closable="false"
    />
    <el-card
      shadow="never"
      header="所有主机"
    >
      <div class="page-buttons">
        <el-button
          type="primary"
          style="width: 180px;"
        >
          创建云主机
        </el-button>
        <el-button
          type="primary"
          text
        >
          管理秘钥
        </el-button>
        <el-button
          type="primary"
          text
        >
          黑名单
        </el-button>
      </div>
      <scTable
        ref="table"
        :data="data"
        height="auto"
        pagination-layout="total, prev, pager, next"
        hide-do
      >
        <el-table-column
          label="主机名称"
          prop="name"
          min-width="240"
        />
        <el-table-column
          label="外网ip"
          prop="ip"
          width="200"
        />
        <el-table-column
          label="系统盘"
          prop="c"
          width="150"
        />
        <el-table-column
          label="数据盘"
          prop="d"
          width="150"
        />
        <el-table-column
          label="业务状态"
          prop="zt"
          width="150"
        >
          <el-tag type="success">
            运行中
          </el-tag>
        </el-table-column>
        <el-table-column
          label="操作"
          width="70"
        >
          <el-dropdown>
            <el-button
              icon="el-icon-more"
              size="small"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>配额</el-dropdown-item>
                <el-dropdown-item divided>
                  重启
                </el-dropdown-item>
                <el-dropdown-item>停机</el-dropdown-item>
                <el-dropdown-item divided>
                  释放主机
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-table-column>
      </scTable>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'Widthlist',
  data(){
    return {
      data: [
        {
          name: "WIN-server-202256324",
          ip: "211.187.11.18",
          c: "80G",
          d: "2048G",
          out: "1"
        },
        {
          name: "WIN-server-20210312081254",
          ip: "211.187.41.56",
          c: "80G",
          d: "2048G",
          out: "1"
        }
      ]
    }
  }
}
</script>

<style scoped>
.page-msg {margin: 15px 0;}
.page-buttons {margin-bottom: 20px;}
</style>
